import React,{Component} from 'react'
import {connect} from 'dva'
import {Grid,List} from 'antd-mobile'
class SelectAvatar extends Component{
    constructor(){
        super()
        this.state = {
           
        }
    }
    
    render(){
        const avatarArr = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'.split(',').map((item)=>({
            //console.log(item);
            icon:require(`../../../static/images/${item}.png`),
            text:item,
        }));
        const listHander = this.state.icon?(<div><span>已选择头像</span><img style={{width:20,marginLeft:'20px'}} src={this.state.icon} alt=""/></div>):'请选择头像';
        return(
            <React.Fragment>
                <List renderHeader={()=>listHander}>
                <Grid
						data={avatarArr}
						columnNum={5} 
						onClick={(elm)=>{
                            this.setState(elm)
                            this.props.handleAvatar(elm.text) 
						}}
					/>
                </List>
            </React.Fragment>
        )
    }
}
const mapStateProps = (state)=>{
    return{
        
    }
}
export default connect(mapStateProps)(SelectAvatar);